<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/mystyle.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form action="/reg/" autocomplete="off" enctype="multipart/form-data" class="form-horizontal reg-form">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="{{ form_obj.username.id_for_label }}" class="col-sm-2 control-label">
                            {{ form_obj.username.label }}
                        </label>
                        <div class="col-sm-8">
                            {{ form_obj.username }}
                            <span class="help-block">
                                {{ form_obj.username.errors.0 }}
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form_obj.password.id_for_label }}" class="col-sm-2 control-label">
                            {{ form_obj.password.label }}
                        </label>
                        <div class="col-sm-8">
                            {{ form_obj.password }}
                            <span class="help-block">
                                {{ form_obj.password.errors.0 }}
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form_obj.re_password.id_for_label }}" class="col-sm-2 control-label">
                            {{ form_obj.re_password.label }}
                        </label>
                        <div class="col-sm-8">
                            {{ form_obj.re_password }}
                            <span class="help-block">
                                {{ form_obj.re_password.errors.0 }}
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form_obj.email.id_for_label }}" class="col-sm-2 control-label">
                            {{ form_obj.email.label }}
                        </label>
                        <div class="col-sm-8">
                            {{ form_obj.email }}
                            <span class="help-block">
                                {{ form_obj.email.errors.0 }}
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">Avatar</label>
                        <div class="col-sm-8">
                            <label for="id_avatar"><img src="/static/img/default.png" alt="" id="avatar-img"></label>
                            <input type="file" accept="image/*" name="avatar" id="id_avatar" style="display: none">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button class="btn btn-success" id="reg-submit" type="button">Register</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script>
        $("#id_avatar").change(function () {
            //generate a File object
            var fileReader = new FileReader();
            //get avatar file
            fileReader.readAsDataURL(this.files[0]);
            fileReader.onload = function () {
                // wait for read and load the image
                $('#avatar-img').attr("src", fileReader.result);
            };
        });

        //Ajax提交注册的数据
        $("#reg-submit").click(function () {
            //receive the post data, and send it to Ajax
            var formData = new FormData();
            formData.append("username", $("#id_username").val());
            formData.append("password", $("#id_password").val());
            formData.append("re_password", $("#id_re_password").val());
            formData.append("email", $("#id_email").val());
            formData.append("avatar", $("#id_avatar")[0].files[0]);
            formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
            $.ajax({
                url:"/reg/",
                type:"post",
                processData: false,
                contentType:false,
                data:formData,
                success: function (data) {
                    if(data.status){
                        //fill the info to page
                        $.each(data.msg, function (k,v) {
                            $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error");
                        })
                    }else{
                        location.href = data.msg;
                    }
                }
            })
        });

        // When the input box has focus， clean the err-info
        $("form input").focus(function () {
            $(this).next().text("").parent().parent().removeClass("has-error");
        });

        //When the username input box lost focus, Verify that the username exists
        $("#id_username").on("input", function () {
            var username = $(this).val();
            //send ajax request
            $.ajax({
                url: "/check_username_exist/",
                type: "get",
                data: {"username": username},
                success: function (data) {
                    if(data.status){
                        $("#id_username").next().text(data.msg).parent().parent().addClass("has-error");
                    }
                }
            })
        })
    </script>
</body>
</html>